<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作用域插槽</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
  <script>
    const app = Vue.createApp({
      template: `  
            <h2>欢迎光临-请选择您的技师</h2>
            <List v-slot="{item}"> 
            <span>{{item}}</span> -
            </List>
        `,
    });
    //子组件
    app.component("List", {
      data() {
        return {
          list: ["大脚", "刘英", "晓红"],
        };
      },
      // template: `
      //     <div>
      //         <div v-for="item in list">{{item}}</div>
      //     </div>
      // `
      template: `
    <div>
        <slot v-for="v in list" :item="v"  />    
    </div>
    `,
    });

    const vm = app.mount("#app");
  </script>
</html>
